<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 下面这个标签会使页面5秒内 重定向至w3cSchool -->
  <!-- <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /> -->
  <!-- <base> 标签为页面上的所有链接规定默认地址或默认目标（target）_blank：所有标签在新窗口中打开 -->
  <base target="_blank" />
  <title>class_and_id</title>
</head>
<style>
  .red {
    color: red;
  }
  .blue {
    color: blue;
  }
  #one {
    color: red;
  }
  #two {
    color: blue;
  }
</style>
<body>
  <!-- <h1>本页面会在5秒内重定向至w3cSchool网页</h1> -->
  <!-- 类和id -->
  <!-- 类class 可以为元素定义css样式 为相同的类设置相同的样式，或者为不同的类设置不同的样式。 -->
  <p class="red">hello world</p>
  <p class="blue">hello world</p>
  <p class="blue">这是另一个class为“blue”的 hello world</p>
  <span class="red">这是一个class为“red”的 span</span>

  <!-- id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的 -->
  <!-- id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。 -->
  <!-- id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。 -->
  <!-- 注释：id 名称对大小写敏感！ -->
  <!-- 注释：id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。 -->
  <!-- id 属性还可用于创建 HTML 书签 -->
  <!-- JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素 -->
  <p id="one">hello world</p>
  <p id="two">hello world</p>
  <!-- class和id的差异：同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用： -->
</body>
<script>
  // JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素
  var text =  document.getElementById("one").textContent;
  console.log(text);
  // 获取不到id为two的元素，因为id为two的元素在js执行时还没有加载
  var fun = setTimeout(function() {
    var two_nodeName = document.getElementById("two").nodeName;
    console.log(document.getElementById("two").innerHTML='Hello JavaScript!');
    console.log("id为two的元素的标签是：" + two_nodeName);
  },1000)
</script>
</html>